<template>
    <view class="personal-container">
        <!-- 用户信息 -->
        <view class="user-info">
            <view class="avatar" @click="editProfile">
                <u-avatar :src="userInfo.avatar" size="120"></u-avatar>
                <view class="edit-icon">
                    <u-icon name="edit-pen" size="24" color="#fff"></u-icon>
                </view>
            </view>
            <view class="info">
                <view class="name">{{userInfo.name}}</view>
                <view class="meta">
                    <text class="gender">{{userInfo.gender}}</text>
                    <text class="age">{{userInfo.age}}岁</text>
                </view>
            </view>
        </view>
        
        <!-- 功能菜单 -->
        <view class="menu-list">
            <view class="menu-group">
                <view class="menu-item" @click="navigateTo('/pages/my/assessment')">
                    <view class="left">
                        <u-icon name="file-text" size="32" color="#409EFF"></u-icon>
                        <text class="title">评估记录</text>
                    </view>
                    <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                </view>
                <view class="menu-item" @click="navigateTo('/pages/my/consultation')">
                    <view class="left">
                        <u-icon name="chat" size="32" color="#409EFF"></u-icon>
                        <text class="title">咨询记录</text>
                    </view>
                    <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                </view>
            </view>
            
            <view class="menu-group">
                <view class="menu-item" @click="navigateTo('/pages/my/feedback')">
                    <view class="left">
                        <u-icon name="feedback" size="32" color="#409EFF"></u-icon>
                        <text class="title">意见反馈</text>
                    </view>
                    <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                </view>
                <view class="menu-item" @click="navigateTo('/pages/my/about')">
                    <view class="left">
                        <u-icon name="info-circle" size="32" color="#409EFF"></u-icon>
                        <text class="title">关于我们</text>
                    </view>
                    <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                </view>
            </view>
        </view>
        
        <!-- 退出登录 -->
        <view class="logout-button">
            <u-button type="error" @click="logout">退出登录</u-button>
        </view>
    </view>
</template>

<script>
import request from '@/util/request'

export default {
    data() {
        return {
            userInfo: {
                avatar: '',
                name: '',
                gender: '',
                age: 0
            }
        }
    },
    methods: {
        async loadUserInfo() {
            try {
                const res = await request.get('/api/user/info')
                if (res.code === 200) {
                    this.userInfo = res.data
                }
            } catch (error) {
                console.log(error)
            }
        },
        
        editProfile() {
            uni.navigateTo({
                url: '/pages/my/edit'
            })
        },
        
        navigateTo(url) {
            uni.navigateTo({ url })
        },
        
        async logout() {
            try {
                await uni.showModal({
                    title: '提示',
                    content: '确定要退出登录吗？',
                    confirmText: '确定',
                    cancelText: '取消'
                })
                
                await request.post('/auth/logout')
                uni.reLaunch({
                    url: '/pages/login/index'
                })
            } catch (error) {
                console.log(error)
            }
        }
    },
    onShow() {
        this.loadUserInfo()
    }
}
</script>

<style lang="less" scoped>
.personal-container {
    min-height: 100vh;
    background-color: #F8F8F8;
    
    .user-info {
        background-color: #fff;
        padding: 40rpx 30rpx;
        display: flex;
        align-items: center;
        
        .avatar {
            position: relative;
            margin-right: 30rpx;
            
            .edit-icon {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 40rpx;
                height: 40rpx;
                background-color: rgba(0, 0, 0, 0.5);
                border-radius: 20rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        
        .info {
            .name {
                font-size: 36rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 10rpx;
            }
            
            .meta {
                font-size: 28rpx;
                color: #666;
                
                .gender {
                    margin-right: 20rpx;
                }
            }
        }
    }
    
    .menu-list {
        margin-top: 20rpx;
        
        .menu-group {
            background-color: #fff;
            margin-bottom: 20rpx;
            
            .menu-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 30rpx;
                border-bottom: 1rpx solid #F5F5F5;
                
                &:last-child {
                    border-bottom: none;
                }
                
                .left {
                    display: flex;
                    align-items: center;
                    
                    .title {
                        font-size: 32rpx;
                        color: #333;
                        margin-left: 20rpx;
                    }
                }
            }
        }
    }
    
    .logout-button {
        margin: 40rpx 30rpx;
    }
}
</style> 